I have 1v1 browser games on my website & I'm trying to make a button show up for the winner & not show up for the loser.
HTML for Button:
<div class="modal__overlay close-disable" data-modal="end-screen">
<div class="modal">
<h2 class="modal__title" data-ending-text>The game has ended!</h2>
<div class="modal__info flex flex-center">
<span> Wager: <%= locals.game.wager %></span>
<img
src="<%= locals.game.cryptoImg %>"
class="modal__crypto-icon"
alt=""
/>
</div>
<button
class="button button--secondary button--small modal__button"
data-button="claim"
>
Claim Prize
</button>
JS Used to define Winner:
clumsyBirdSocket.on('game-finished', () => {
isGameOver = true;
endGame();
})
clumsyBirdSocket.on('opponent-left', () => {
isGameOver = true;
showEndScreen();
});
// HTML selectors
const statusText = document.querySelector('[data-status-text]')
const endingText = document.querySelector('[data-ending-text]');
const endScreenModal = document.querySelector('[data-modal="end-screen"]');
// global variables
let isGameOver = false;
let isPlayerDead = false;
let gameStarted = false;
let scores = {
player: 0,
opponent: 0
}
function endGame() {
if(!isGameOver) return;
let text;
if(scores.player > scores.opponent) {
text = TEXTS.win;
} else if(scores.player < scores.opponent) {
text = TEXTS.lose;
document.getElementById("claim").style.display="none";
} else {
text = TEXTS.draw;
}
text += `<br> Scores: ${scores.player} - ${scores.opponent}`;
showEndScreen(text);
}
function showEndScreen(text = TEXTS.opponentForfeited) {
endingText.innerHTML = text;
statusText.innerText = "";
statusText.classList.remove('text-waiting');
endScreenModal.classList.add('active');
}
If i add
document.getElementById("claim").style.display="none"
Under the "function endGame" Takes the issue out Temporarily, When the player who WON claims there prize and returns to lobby it then prompts the Loser with the claim Prize button.. Hence why its a temporary fix. Any direction Helps.